<template>
    <scroll-view style="height: 100%;" scroll-y>
        <view style="padding: 40rpx;padding-top: 30rpx;">
            <view class="order_box">
                <!-- <view>
                    <view style="font-size: 46rpx;font-weight: 700;margin-bottom: 10rpx;">
                        任务管理
                    </view>
                    <view style="font-size: 32rpx;margin-bottom: 40rpx;">
                        <view class="">
                            由此进入
                        </view>
                        <view class="">
                            收运任务管理
                        </view>
                    </view>
                    <image style="width: 60rpx;height: 60rpx;" src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/Qingdao/001.png" />

                </view> -->
                <image @click="targetQuest" mode="widthFix"
                    src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202395.png" />
            </view>
            <view class="grid_box">
                <view
                    style="width: 320rpx;height: 300rpx;background-color: #fff;border-radius: 40rpx;padding: 40rpx;box-sizing: border-box;margin-top: 30rpx;">
                    <image style="width: 80rpx;height: 80rpx;"
                        src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202389.png" />
                    <view style="font-size: 60rpx;color: #000;font-weight: 700;margin-bottom: 10rpx;">
                        {{ leisure+running+fault }}
                    </view>
                    <view style="font-size: 24rpx;">
                        全部收运车辆
                    </view>
                </view>
                <view
                    style="width: 320rpx;height: 300rpx;background-color: #fff;border-radius: 40rpx;padding: 40rpx;box-sizing: border-box;margin-top: 30rpx;">
                    <image style="width: 80rpx;height: 80rpx;"
                        src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202390.png" />
                    <view style="font-size: 60rpx;color: #000;font-weight: 700;margin-bottom: 10rpx;">
                        {{ running }}
                    </view>
                    <view style="font-size: 24rpx;">
                        收运中车辆数量
                    </view>
                </view>
                <view
                    style="width: 320rpx;height: 300rpx;background-color: #fff;border-radius: 40rpx;padding: 40rpx;box-sizing: border-box;margin-top: 30rpx;">
                    <image style="width: 80rpx;height: 80rpx;"
                        src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202383.png" />
                    <view style="font-size: 60rpx;color: #000;font-weight: 700;margin-bottom: 10rpx;">
                        {{ fault }}
                    </view>
                    <view style="font-size: 24rpx;">
                        报停中车辆数量
                    </view>
                </view>
                <view
                    style="width: 320rpx;height: 300rpx;background-color: #fff;border-radius: 40rpx;padding: 40rpx;box-sizing: border-box;margin-top: 30rpx;">
                    <image style="width: 80rpx;height: 80rpx;"
                        src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202391.png" />
                    <view style="font-size: 60rpx;color: #000;font-weight: 700;margin-bottom: 10rpx;">
                        {{ leisure }}
                    </view>
                    <view style="font-size: 24rpx;">
                        空闲中车辆数量
                    </view>
                </view>

            </view>
            <view class="card_box">

            </view>
            <view class="card_search_box">
                <view>
                    图表每周按周呈现
                </view>
                <view>
                    牛粪
                </view>
            </view>
            <view style="font-size: 40rpx;font-weight: 700;margin-top: 30rpx;">
                今日已收集有机质（吨）
            </view>
            <view class="li_box">
                <view style="display: flex;align-items: center;">
                    <view
                        style="width: 30rpx;height: 30rpx;border-radius: 40rpx;background-color: #f3744d;margin-right: 20rpx;">

                    </view>
                    <view style="display: flex;flex-direction: column;">
                        <view style="font-size: 36rpx;font-weight: 700;margin-bottom: 10rpx;vertical-align: text-top">
                            牛粪
                        </view>
                        <view style="font-size: 28rpx;">
                            预计待收集： 32吨
                        </view>

                    </view>

                </view>
                <view style="font-size: 32rpx;font-weight: 700;color: #f3744d;">
                    28
                </view>


            </view>
            <view class="li_box">
                <view style="display: flex;align-items: center;">
                    <view
                        style="width: 30rpx;height: 30rpx;border-radius: 40rpx;background-color: #f3744d;margin-right: 20rpx;">

                    </view>
                    <view style="display: flex;flex-direction: column;">
                        <view style="font-size: 36rpx;font-weight: 700;margin-bottom: 10rpx;vertical-align: text-top">
                            牛粪
                        </view>
                        <view style="font-size: 28rpx;">
                            预计待收集： 32吨
                        </view>

                    </view>

                </view>
                <view style="font-size: 32rpx;font-weight: 700;color: #f3744d;">
                    28
                </view>


            </view>
            <view class="li_box">
                <view style="display: flex;align-items: center;">
                    <view
                        style="width: 30rpx;height: 30rpx;border-radius: 40rpx;background-color: #f3744d;margin-right: 20rpx;">

                    </view>
                    <view style="display: flex;flex-direction: column;">
                        <view style="font-size: 36rpx;font-weight: 700;margin-bottom: 10rpx;vertical-align: text-top">
                            牛粪
                        </view>
                        <view style="font-size: 28rpx;">
                            预计待收集： 32吨
                        </view>

                    </view>

                </view>
                <view style="font-size: 32rpx;font-weight: 700;color: #f3744d;">
                    28
                </view>


            </view>
            <view class="li_box">
                <view style="display: flex;align-items: center;">
                    <view
                        style="width: 30rpx;height: 30rpx;border-radius: 40rpx;background-color: #f3744d;margin-right: 20rpx;">

                    </view>
                    <view style="display: flex;flex-direction: column;">
                        <view style="font-size: 36rpx;font-weight: 700;margin-bottom: 10rpx;vertical-align: text-top">
                            牛粪
                        </view>
                        <view style="font-size: 28rpx;">
                            预计待收集： 32吨
                        </view>

                    </view>

                </view>
                <view style="font-size: 32rpx;font-weight: 700;color: #f3744d;">
                    28
                </view>


            </view>
            <view class="li_box" style="margin-bottom: 200rpx;">
                <view style="display: flex;align-items: center;">
                    <view
                        style="width: 30rpx;height: 30rpx;border-radius: 40rpx;background-color: #f3744d;margin-right: 20rpx;">

                    </view>
                    <view style="display: flex;flex-direction: column;">
                        <view style="font-size: 36rpx;font-weight: 700;margin-bottom: 10rpx;vertical-align: text-top">
                            牛粪
                        </view>
                        <view style="font-size: 28rpx;">
                            预计待收集： 32吨
                        </view>

                    </view>

                </view>
                <view style="font-size: 32rpx;font-weight: 700;color: #f3744d;">
                    28
                </view>
            </view>
        </view>
    </scroll-view>
</template>
<script>
import { stats } from '../../common/example';
export default {
    data() {
        return {
            leisure:0,
            running:0,
            fault:0
        }
    },
    methods: {
        //任务管理
        targetQuest() {
            uni.navigateTo({
                url: '/pagesDispatch/index/quest'
            });
        }
    },
    mounted() {
        // 收运车辆统计
        stats({}).then(res => {
            console.log(res.data, '收运车辆统计');
            if (res.data.code == 200) {
                this.leisure = res.data.data.leisure || 0;
                this.running = res.data.data.running || 0;
                this.fault = res.data.data.fault || 0;
            }
        })
    }
}
</script>